<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    :custom-header="true"
    :full-page="false"
    :is-loading="pageLoading"
    :loadmore="true"
    :refresh="true"
    @loadmorefun="getNews"
    @reload="reload"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <!--        <gui-header-leading :back="false" :home="false" />-->
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-bold gui-flex1 gui-text-center gui-ellipsis gui-primary-text">资讯</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <!--        <view style="width: 120rpx" />-->
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
      <view id="myheader" class="gui-border-b gui-bg-gray gui-dark-bg-level-3" style="padding: 15rpx 30rpx">
        <gui-switch-navigation :items="navItems" :size="150" @change="navChange" />
      </view>
    </template>
    <template #gBody>
      <gui-article-list :articles="artciles" @newstap="newstap" />
      <!-- 利用模态对话框弹出协议  -->
      <gui-modal
        ref="agreeRef"
        :can-close-by-shade="false"
        :is-close-btn="false"
        title="用户协议及隐私政策"
        width="660rpx"
        :z-index="999999"
      >
        <template #content>
          <scroll-view class="gui-bg-gray gui-dark-bg-level-2" scroll-y :style="{ height: contentHeight + 'px' }">
            <text class="gui-block gui-text" style="line-height: 50rpx; padding: 25rpx">
              协议内容... 协议模板: https://docs.getui.com/templet/
            </text>
          </scroll-view>
        </template>
        <template #btns>
          <!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
          <view class="gui-flex gui-rows gui-space-between">
            <text class="modal-btns gui-block-text gui-color-gray" @tap="disagree">不同意</text>
            <text class="modal-btns gui-block-text gui-primary-color" @tap="agree">同意协议</text>
          </view>
        </template>
      </gui-modal>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
// 模拟 api 请求数据，格式见 article.js
import artcilesData from '@/Grace6/demoData/article.js'
import graceJs from '@/Grace6/js/grace.js'
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const agreeRef = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(true)
// 分类
const navItems = ref<Array<any>>([
  { id: 1, name: '热门推荐' },
  { id: 2, name: '院校查询' },
  { id: 3, name: '专业资讯' },
  { id: 4, name: '强基计划' },
  { id: 5, name: '专项计划' },
])
// 当前展示的分类索引
const currentIndex = ref<number>(0)
// 新闻列表数据， 分类切换重新获取第一页
const artciles = ref<Array<any>>([])
// 页码
const page = ref<number>(1)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)
const contentHeight = ref<number>(300)
const navChange = (index: number) => {
  // 刷新当前分类对应的数据
  if (currentIndex.value !== index) {
    page.value = 1
    currentIndex.value = index
    getNews()
  }
}
const reload = () => {
  page.value = 1
  getNews(true)
}
// 新闻加载函数
// isReload 代表下拉刷新
const getNews = (isReload?: boolean) => {
  apiLoadingStatus.value = true
  if (page.value <= 1) {
    const newsList = []
    if (!isReload) {
      pageLoading.value = true
    }
  }
  // 真实情况 url 地址类似如下格式 :
  // var url = 'http://您的api域名/**/**/?分类id='+this.navItems[this.currentIndex].id+'&页码='+this.page;
  // 连接 api 获取新闻数据
  // 模拟 api 加载数据
  setTimeout(() => {
    // 对演示数据随机刷新模拟数据刷新
    const demoArr = graceJs.arrayShuffle(artcilesData.articleList)
    if (page.value >= 2) {
      artciles.value = artciles.value.concat(demoArr)
      if (page.value >= 3) {
        pageRef.value.nomore()
      } else {
        // 加载完成后停止加载动画
        pageRef.value.stoploadmore()
      }
    }
    // 第一页 有可能是第一次加载或者刷新
    else {
      artciles.value = []
      artciles.value = demoArr
      // 加载完成后停止加载动画
      pageRef.value.stoploadmore()
      // 刷新
      if (isReload) {
        pageRef.value.endReload()
      }
      pageRef.value.toTop()
    }
    page.value++
    pageLoading.value = false
    apiLoadingStatus.value = false
  }, 200)
}
// 新闻点击
const newstap = (e: any) => {
  // 获取新闻 id
  const newsId = e
  console.log(newsId)
  // 打开新闻详情页面
  uni.navigateTo({
    url: `./detail/index?id=${e}`,
  })
}
// 协议
const disagree = () => {
  uni.showToast({
    title: '您点击了不同意按钮',
    icon: 'none',
  })
}
const agree = () => {
  uni.showToast({
    title: '您点击了同意按钮',
    icon: 'none',
  })
  uni.setStorageSync('agreeRec', 'agreed')
  uni.showTabBar()
  agreeRef.value.close()
}
onMounted(() => {
  getNews()
  const agreeRec = uni.getStorageSync('agreeRec')
  // 用户没有同意过弹出协议框
  if (!agreeRec || agreeRec === '') {
    // 计算窗口高度，规划协议内容高度 = 窗口高度 * 0.65
    const systemInfo = graceJs.system()
    contentHeight.value = systemInfo.windowHeight * 0.65
    agreeRef.value.open()
    uni.hideTabBar()
  }
})
onLoad((option) => {
  if (option?.code) {
    uni.setStorageSync('code', option.code)
  }
})
</script>
<style scoped>
.modal-btns {
  line-height: 100rpx;
  height: 100rpx;
  font-size: 35rpx;
  text-align: center;
  width: 320rpx;
}
</style>
